<template>
  <div>
    <el-card>
      <i class="el-icon-search"> 筛选搜索</i>
      <el-form :inline="true" :model="searchList" style="margin-top: 20px" ref="formRef">
        <el-form-item label="姓名 :" prop="name">
          <el-input placeholder="请输入姓名" v-model="searchList.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码 :" prop="phone">
          <el-input placeholder="请输入手机号码" v-model="searchList.phone"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校 :" style="margin-left:68px" prop="school">
          <el-input placeholder="请输入学校" v-model="searchList.school"></el-input>
        </el-form-item>
        <el-form-item label="学历 :" prop="education">
          <el-select v-model="searchList.education" placeholder="请选择学历">
            <el-option label="专科" value="专科"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向岗位 :" prop="postion">
          <el-select placeholder="请输入意向岗位" v-model="searchList.postion">
            <el-option label="Java前端开发" value="前端"></el-option>
            <el-option label="Java后端开发" value="后端"></el-option>
            <el-option label="软件测试" value="软件测试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向工作地 :" prop="addr">
          <el-select placeholder="请输入意向工作地" v-model="searchList.addr">
            <el-option label="温州" value="温州"></el-option>
            <el-option label="杭州" value="杭州"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职进度 :" prop="progress">
          <el-select placeholder="请输入入职进度" v-model="searchList.progress">
            <el-option label="待初筛" value="待初筛"></el-option>
            <el-option label="待一面" value="待一面"></el-option>
            <el-option label="待二面" value="待二面"></el-option>
            <el-option label="待DXC面" value="待DXC面"></el-option>
            <el-option label="待入职" value="待入职"></el-option>
          </el-select>
        </el-form-item>
        <el-form style="float: right">
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="searchData(searchList)">查询</el-button>
        </el-form>
      </el-form>
    </el-card>
    <br />
    <!-- 操作 -->
    <el-card>
      <i class="el-icon-tickets"> 操作</i>
      <div class="div1">
        <el-button>导出列表</el-button>
      </div>
    </el-card>
    <br />
    <!-- 表单区域 -->
    <el-table
    :data="tablelist"
    border
    :header-cell-style="{ 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="index" label="序号" width="50px" prop="id"></el-table-column>
      <el-table-column label="姓名" width="100px" prop="name"></el-table-column>
      <el-table-column label="性别" width="60px" prop="sex" :formatter="sexf"></el-table-column>
      <el-table-column label="手机号码" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="学校" prop="school"></el-table-column>
      <el-table-column label="学历" prop="education"></el-table-column>
      <el-table-column label="入职进度" prop="progress"></el-table-column>
      <el-table-column label="初筛评价" prop="comment"></el-table-column>
      <el-table-column label="一面评价" prop="first"></el-table-column>
      <el-table-column label="二面评价" prop="second"></el-table-column>
      <el-table-column label="DXC面试评价" width="110px" prop="dxc"></el-table-column>
      <el-table-column label="放弃入职原因" prop="reason"></el-table-column>
      <el-table-column label="投递时间" width="101px" sortable prop="time"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template v-slot="scope">
          <!-- 修改按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="putOne(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteData(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="25%" @close="resetinside">
          <el-form :model="reForm" label-width="110px" :rules="rules" ref="formRef2">
            <el-form-item label="序号 :" prop="id">
              <el-input v-model="reForm.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名 :" prop="name">
              <el-input v-model="reForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别 :" prop="sex">
              <el-select v-model="reForm.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号 :" prop="phone">
              <el-input v-model="reForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱 :" prop="email">
              <el-input v-model="reForm.email"></el-input>
            </el-form-item>
            <el-form-item label="学校 :" prop="school">
              <el-input v-model="reForm.school"></el-input>
            </el-form-item>
            <el-form-item label="学历 :" prop="education">
              <el-select v-model="reForm.education" placeholder="请选择学历">
                <el-option label="专科" value="专科"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职进度 :" prop="progress">
              <el-select v-model="reForm.progress" placeholder="请选择">
                <el-option label="待初筛" value="待初筛"></el-option>
                <el-option label="待一面" value="待一面"></el-option>
                <el-option label="待二面" value="待二面"></el-option>
                <el-option label="待DXC面" value="待DXC面"></el-option>
                <el-option label="待入职" value="待入职"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="初筛评价 :" prop="comment">
              <el-input v-model="reForm.comment"></el-input>
            </el-form-item>
            <el-form-item label="一面评价 :" prop="first">
              <el-input v-model="reForm.first"></el-input>
            </el-form-item>
            <el-form-item label="二面评价 :" prop="second">
              <el-input v-model="reForm.second"></el-input>
            </el-form-item>
            <el-form-item label="DXC面试评价 :" prop="dxc">
              <el-input v-model="reForm.dxc"></el-input>
            </el-form-item>
            <el-form-item label="放弃入职原因 :" prop="reason">
              <el-input v-model="reForm.reason"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editInfo(reForm)">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
import { searchTalent, deleteById, save } from "@/api/talent_pool";

export default {
  data() {
    return {
      tablelist: [],
      editDialogVisible: false,
      listLoading: true,
      total: 0,
      pageNum: 1,
      pageSize: 5,
      //搜索表
      searchList: {
        name: "",
        phone: "",
        school: "",
        skill: "",
        education: "",
        postion: "",
        addr: "",
        progress:"",
      },
      // 修改表
      reForm: {
        id: "",
        name: "",
        sex:"",
        phone: "",
        email:"",
        school:"",
        education: "",
        postion: "",
        progress:"",
        comment:"",
        first:"",
        second:"",
        dxc:"",
        reason:""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        school: [{ required: true, message: "请输入学校", trigger: "blur" }],
        education: [{ required: true, message: "请选择学历", trigger: "blur" }],
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      fetch(
        "http://localhost:8080/talent_pool/page?pageNum=" +
          this.pageNum +
          "&pageSize=" +
          this.pageSize
      )
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
          this.tablelist = res.data;
          this.total = res.total;
        });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    searchData(e) {
      this.listLoading = true;
      console.log(e);
      searchTalent(e).then((res) => {
        console.log(res);
        this.tablelist = res.data.data;
        this.total = res.data.total;
      });
    },
    deleteData(id) {
      this.listLoading = true;
      deleteById(id).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.load();
      });
    },
    sexf(row) {
      return row.sex === 1 ? "男" : "女";
    },
    putOne(resetMessage) {
      this.reForm = resetMessage
      this.editDialogVisible = true;
    },
    reset() {
      this.$refs.formRef.resetFields();
    },
    resetinside() {
      this.$refs.formRef2.resetFields();
    },
    editInfo(resumeMessage) {
      this.listLoading = true;
      save(resumeMessage).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
        this.load();
      });
    },
  },
};
</script>

<style scoped>
.div1 {
  position: relative;
  float: right;
  bottom: 10px;
}
.el-form-item {
  margin-left: 50px;
  height: 20px;
}
.el-input {
  width: 200px;
}
</style>
